<template>
    <div>
        <vxe-grid
                border
                resizable
                show-overflow
                keep-source
                :pager-config="tablePage"
                :proxy-config="tableProxy"
                :columns="tableColumn"
                :toolbar="tableToolbar"
                :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">

        </vxe-grid>
    </div>
</template>
<script>
    import XEUtils from 'xe-utils'
    import VXETable from 'vxe-table'
    import {createEditRender,createFormItemRender,cellText} from "./edit";
    export default {
        created(){
            // 创建一个简单输入框渲染器
            VXETable.renderer.add('ElColorPicker', {
                // 可编辑激活模板
                renderEdit: createEditRender() ,
                // (h, renderOpts, params) {
                //     let { row, column } = params
                //     return cellText(h, row[column.property])
                // }
                renderCell: createEditRender(),
                // 可编辑显示模板
                renderItem : createFormItemRender()
            })
            VXETable.interceptor.add('event.clearActived', (params, event) => {
                // 比如点击了某个组件的弹出层面板之后，此时被激活单元格不应该被自动关闭，通过返回 false 可以阻止默认的行为。
                // console.log("className => ",event.target.className)
                // console.log("params",params)

                let { row, column } = params
                if (column.property ==='color'&&event.target.className && (event.target.className.indexOf('el-color-') > -1|| event.target.className.indexOf('el-input__inner')>-1)) {
                    return false
                }
            })
        },
        data () {
            return {
                tablePage: {
                    pageSize: 5,
                    pageSizes: [5, 10, 15, 20, 50]
                },
                tableProxy: {
                    props: {
                        result: 'data.data.records',
                        total: 'data.total'

                    },
                    ajax: {
                        query: ({ page }) => this.$api.fetchClassKindList({current: page.currentPage,size: page.pageSize}),
                        delete: ({ body }) => this.$api.delClassKind(body),
                        save: ({ body }) => {
                            let Promise
                            if(body.insertRecords.length>0&&body.updateRecords.length ===0){
                                return this.$api.addClassKind(body.insertRecords)

                            }
                            if(body.updateRecords.length>0&&body.insertRecords.length===0){
                                return this.$api.putClassKind(body.updateRecords)
                            }
                            return this.$api.addClassKind(body.insertRecords)
                                .then(res=>{
                                    return this.$api.putClassKind( body.updateRecords)
                                })

                        }
                    }
                },
                tableToolbar: {
                    buttons: [
                        { code: 'reload', name: '刷新' },
                        { code: 'insert_actived', name: '新增' },
                        { code: 'delete_selection', name: '删除', icon: 'fa fa-bookmark-o' },
                        { code: 'save', name: '保存' },
                        { code: 'export', name: '导出.csv' }
                    ],
                    refresh: true,
                    custom: true
                },
                tableColumn: [
                    { type: 'checkbox', width: 50 },
                    { field: 'id', title: 'ID', minWidth: 100, editRender: { name: 'input' },visible: false },
                    { field: 'className', title: '名称', minWidth: 100, editRender: { name: 'input' } },
                    { field: 'startTime', title: '开始时间', minWidth: 100, editRender: { name: 'ElTimeSelect' ,props: { pickerOptions: {start: '00:00', step: '00:01', end: '23:59',maxTime: '23:59'},valueFormat: 'HH:mm'},events: {focus: this.startTimeFocus}} },
                    { field: 'endTime', title: '结束时间', minWidth: 100, editRender: { name: 'ElTimeSelect',props: { pickerOptions: {start: '00:00', step: '00:01', end: '23:59',minTime: '00:00'} ,valueFormat: '00:00'},events: {focus: this.endTimeFocus}} },
                    { field: 'color', title: '颜色', minWidth: 100, cellRender: { name: 'ElColorPicker',prop: {size: "small"} },editRender: { name: 'ElColorPicker' }},
                    { field: 'limitCount', title: '总号数', minWidth: 100, editRender: { name: 'input' } },
                    { field: 'revision', title: '乐观锁', minWidth: 100, editRender: { name: 'input' },visible: false },
                    { field: 'createdBy', title: '创建人', minWidth: 100, editRender: { name: 'input' },visible: false },
                    { field: 'createTime', title: '创建时间', minWidth: 100, editRender: { name: 'input' },visible: false },
                    { field: 'updatedBy', title: '更新人', minWidth: 100, editRender: { name: 'input' },visible: false },
                    { field: 'updateTime', title: '更新时间', minWidth: 100, editRender: { name: 'input' },visible: false },
                    { field: 'isActivity', title: '是否可用', minWidth: 100, editRender: { name: 'input' },visible: false }
                ],
                currentStartTime: '',
                currentEndTime: ''

            }
        },
        methods: {
            formatterDate ({ cellValue }) {
                return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
            },
            startTimeChange(e,data){

                // this.tableColumn[4].editRender.props.pickerOptions.minTime= data
            },

            startTimeFocus(data,e){
                console.log('startData=>',data)
                if(data.row&&data.row.endTime){
                    console.log(data.row.endTime)
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.maxTime= data.row.endTime
                }else{
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.maxTime= "23:59"
                }
            },
            startTimeBlur(data,e){
                if(data.row&&data.row[this.tableColumn[data.columnIndex].field]){
                    this.currentStartTime = e
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.maxTime= data.row.endTime
                }else{
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.maxTime= "23:59"
                }
            },
            endTimeFocus(data,e){
                console.log('endData=>','=>',data)
                if(data.row&&data.row.startTime){
                    console.log("startTime:",data.row.startTime)
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.minTime= data.row.startTime
                }else{
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.minTime= "00:00"
                }
            },
            endTimeblur(data,e){
                console.log(e,'=>',data)
                if(data.row&&data.row.startTime){
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.minTime= data.row.startTime
                }else{
                    this.tableColumn[data.columnIndex].editRender.props.pickerOptions.minTime= "00:00"
                }
            },
        }
    }
</script>
<style>

</style>
